Un efecto rollover no sólo puede aplicarse a dos imágenes que cambian al pasar el cursor, también es posible crear un rollover con opacidad y en Mandarindesign así lo demuestran.
Para crearlo añadiremos unas líneas a nuestra plantilla.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }


Guardamos los cambios y en donde deseamos crear el efecto añadimos:

<a class="linkopacity" href="url-de-la-pagina" title="texto a mostrar" ><img src="url-de-la-imagen" border="0" style="border:1px solid black;" width="32" height="32" alt="Our friend Stu"></a>

Our friend Stu


Donde width="32"y height="32" lo podemos modificar para adecuar la imagen de tamaño. Si deseamos utilizar el efecto para crear un blogroll lo podemos hacer añadiendo el código tantas veces como imágenes deseamos añadir.

En border: 1px escogemos grosor del borde.

En lugar de color negro para el borde (black) podemos escoger otro cualquiera, así como el tipo de borde en (solid)
Ejemplo:

Our friend Stu Our friend Stu Our friend Stu Our friend Stu
Our friend Stu Our friend Stu Our friend Stu Our friend Stu
Our friend Stu Our friend Stu Our friend Stu Our friend Stu
Our friend Stu Our friend Stu Our friend Stu Our friend Stu
Our friend Stu Our friend Stu Our friend Stu Our friend Stu

N3x

Se ve Muy Bien

Responder
Anónimo

Hola, me gustaria saber como hacer para poner en el blog, como entrda el cmap tools, este es un programa en el cuao se pueden hacer mapas conceptuales. Por la web vi varios blogs que los tenian colgados ahi, pero no se como hacer para ponerlo, ya que si lo pongo como una imagen, no servirian los links

helllp!

Responder
Marta Nieves Montero González

Mi estimada cómplice:

Te recuerdo que te he obsequiado con un premio.

Por favor, pásate por mi blog para recogerlo.

Un besito,


Vesta, desde el corazón

Responder
Emmanuel Joven

Hola, soy Emmanuel, el creador de Unyversal Time y te invito a ti Gema a que escribas y/o modifiques HTML/Javaescript en
Bloggers Prodigiosos, de mmomento esc un blog sin nada, espero tu respuesta, porfavor contacta en mi blog ok?
tu dimelo y yo hago el resto.

Responder
Pamoba

Buff me ha costado horrores implantarlo, he tenido que leerme su plantilla de arriba abajo varias veces, e incluso probar con plantillas "simples". Pero al final he conseguido que funcione con la cuenta de la vieja; probar en todos los lugares posibles, sé que no es muy técnico, pero oye, si funciona.

Gracias por hacer cada día mi blog más mono

Responder
[●][Fake!][●]

muchas gracias por el tutorial.
resultó excelente, y tiene buena apariencia.

Tinta&Letras

Responder
Gem@

Lamento ver estos comentarios con tanto retraso :(
Gracias por comentar N3x A7X

Cecilia si n conseguiste añadirlo déjame la url de la página que vea el tipo de código que genera, pero normalmente es html y se añade como un elemento de página.

Vesta te pido mil disculpas por no ver este comentario antes. Mil gracias amiga :)

Emmanuel creo que ya hablamos sobre Unyversal Time aún sin ver este comentario ;)

Pamoba me alegra que lo solucionaras.

Gracias [●][Fake!][●] :)

Responder
Emilio Black

Gracias Gem@!!! :) :) ;)

Responder
Gem@

De nada Emilio :)

Responder
Anónimo

Hola Gema, veras una consulta, el efcto del rollover este, se puede hacer a la inversa, es decir que la imagen aparzca como es, y al pasar el raton se quede en gris

Gracias

Un saludo, tu blog me es muy util

Responder
Gem@

yz Hola Maristas 7, puede hacerse invirtiendo los estilos:

a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

Y la imagen la añadimos de la misma forma ;)

Responder
Anónimo

Muchas gracias Gema, ya me funciona como keria

Responder
Jonatan

Buenas noches Gema, no se si visitarás este comentario ya que lleva mucho tiempo sin aparición de comentarios pero tengo una duda al respecto. Mira te comento, estoy creándole una página web a mi cuñada que es modelo y tengo un pequeño problema con el rollover este. A mi se me ve perfectamente, lo tengo colocado en las imágenes y las tengo con opacidad 0.4em, el caso es que en mi ordenador funciona pero entro en la página desde otro ordenador y el efecto rollover no aparece. Me gustaria saber si tiene solución, gracias.

Responder
Gem@

:: Jonatan no sabría decirte donde está el problema sin verlo, puede que se trate del navegador ya que dices que surge al cambiar de ordenador :S

:: Veo tu comentario tarde Maristas lo siento :S

Responder
Jonatan

Mira creo que el problema es que en la imagen no pongo ningún código. He intentado ponerlo pero el caso es que no se poner dos códigos. Porque también tengo puesto el lytebox. Si me dices una forma de poner el rollover y el lytebox de forma que pueda utilizar los dos códigos en una imagen seria de mucha ayuda. Muchas gracias, un saludo.

Responder
Gem@

:: Para mostrar la imagen en una ventana modal con Lytebox prueba de este modo añadiendo la clase linkopacity directamente al enlace.
<a class="linkopacity" href="url-imagen-grande" rel="lytebox" title="Título"><img src="url-imagen-pequeña" style="height: 150px; width: 150px;" /></a>
He puesto un ejemplo en este blog de pruebas:
http://forevergema.blogspot.com/

Responder
Jonatan

Vale muchas gracias. He visto que el problema viene como bien dijiste del explorador. Utilizo Chrome y en Internet explorer no se me ve bien a mi tampoco. Si sabes una solución para eso dimelo, sino pues miraré haber por mis propios medios de encontrar una solución. Muchas gracias!

Responder
Gem@

:: La solución ideal es actualizar el navegador a la última versión, de todas formas las propiedades varían según navegador por eso lo ideal es añadirlas todas, por ejemplo para Firefox usamos opacity... valor y para Explorer filter:alpha(opacity...
Para las últimas versiones de Explorer:
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */

Responder
Gem@

:: El emoticon sería lo mismo que añadimos para el emoticon sonriente, esto : y esto D

Responder
iris

HOLA BUENÍSIMO EL BLOG, QUISERA SABER SI ALGUIEN PUEDE AYUDARME, LES CUENTO, NECESITO UN SCOLL PARA UNA GALERÍA DE IMÁGENES EL QUE TENGA A LOS NOMBRES CON EFECTO ROLLOVER Y ADEMÁS QUE QUEDE MARCADO EL NOMBRE EN EL QUE NOS ENCONTRAMOS. PORFIS ALGUIEN ME AYUDE. GRACIAS BAI.

Responder
Gem@

:: Lo siento iris no sé de ninguno que haga todo eso.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top